<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示所有账户</title>


    <script src="js/vuejs-2.5.16.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
     <div id="app">
         <table border="1" cellpadding="0" width="400px" align="center">
             <tr>
                 <th>id</th>
                 <th>name</th>
                 <th>money</th>
                 <th>操作</th>
             </tr>
             <tr v-for="(account,index) in accountList">
                 <td v-html="account.id"></td>
                 <td v-html="account.name"></td>
                 <td v-html="account.money"></td>
                 <td>
                     <input type="button" value="删除" @click="deleteById(account.id)">
                     <input type="button" value="修改" @click="updateById(account.getId)">
                 </td>
             </tr>
         </table>
     </div>
     <script type="text/javascript">
         new Vue({
             el:"#app",
             data:{
                 accountList:[]
             },
             methods:{
                 findAll(){
                     axios.get("/account/findAll").then(response=>{
                         //处理响应结果
                         alert(response.data.result);
                         this.accountList=response.data.result;
                     }).catch(error=>{
                         console.log(error);
                     });
                 },
                 deleteById(id){
                     axios.get("/account/"+id).then(response=>{
                           alert(id);
                         if (response.data.flag) {
                             this.findAll();
                         }
                     }).catch(error=>{
                         console.log(error);
                     });
                 }
             },
             created(){
                 this.findAll();
             }
         });
     </script>
</body>
</html>